<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
	<title>U袋网</title>
</head>
<body>
<div id="vuebox">
	<!-- 顶部tab -->
	<div th:replace="~{ubatnet-header::#header}"></div>
	<!-- 搜索栏 -->
	<div class="top-search">
		<div class="inner">
			<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
			<div class="search-box">
				<form class="input-group">
					<input v-model="textsearch" placeholder="Ta们都在搜U袋网" type="text">
					<span class="input-group-btn">
						<button type="button" @click="searchsou()">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</button>
					</span>
				</form>
				<p class="help-block text-nowrap">
					<a href="">连衣裙</a>
					<a href="">裤</a>
					<a href="">衬衫</a>
					<a href="">T恤</a>
					<a href="">女包</a>
					<a href="">家居服</a>
					<a href="">2017新款</a>
				</p>
			</div>
			<div class="cart-box">
				<a href="udai_shopcart.html" class="cart-but">
					<i class="iconfont icon-shopcart cr fz16"></i> 购物车 0 件
				</a>
			</div>
		</div>
	</div>
	<!-- 内页导航栏 -->
	<div class="top-nav bg3">
		<div class="nav-box inner">
			<div class="all-cat">
				<div class="title"><i class="iconfont icon-menu"></i> 全部分类</div>
			</div>
			<ul class="nva-list">
				<a href="/"><li>首页</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="enterprise_id.html"><li>企业账号</li></a>
				<a href="udai_contract.html"><li>诚信合约</li></a>
				<a href="item_remove.html"><li>实时下架</li></a>
			</ul>
		</div>
	</div>
	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a href="/">首页</a></li>
				<li class="active">商品筛选</li>
			</ol>
			<div class="filter-box">
				<div class="all-filter">
					<div class="filter-value">
						<div class="filter-title">选择商品分类 <i class="iconfont icon-down"></i></div>
						<!-- 全部大分类 -->
						<ul class="catelist-card">
							<a href=""><li class="active">全部分类</li></a>
							<a  v-for="item in level1.level1"><li @click.prevent="selealltype(item.id)">{{item.proname}}</li></a>

						</ul>
						<!-- 已选选项 -->
						<div class="ul_filter">

						</div>
						<a class="reset pull-right" @click.stop="seleall()">重置</a>
					</div>
				</div>
				<div class="filter-prop-item">
					<span class="filter-prop-title">分类：</span>
					<ul class="clearfix">
						<a @click.stop="seleall()"><li class="active">全部</li></a>
						<a  v-for="item in level2.level2" @click.stop="selelevel2type(item.id)"><li>{{item.proname}}</li></a>
					</ul>
				</div>
				<!--商品颜色-->
				<div class="filter-prop-item">
					<span class="filter-prop-title">颜色：</span>
					<ul class="clearfix">
						<a href=""><li class="active">全部</li></a>
						<a @click.stop="selecolor(item.id,item.color)" v-for="item in clothColor"><li>{{item.color}}</li></a>
					</ul>
				</div>
				<!--商品尺寸-->
				<div class="filter-prop-item">
					<span class="filter-prop-title">尺寸：</span>
					<ul class="clearfix">
						<a href=""><li class="active">全部</li></a>
						<a @click.stop="selesize(item.id,item.size)" v-for="item in sizeList"><li>{{item.size}}</li></a>
					</ul>
				</div>
				<!--商品价格-->
				<div class="filter-prop-item">
					<span class="filter-prop-title">价格：</span>
					<ul class="clearfix">
						<a href=""><li class="active">全部</li></a>
						<a v-for="item in priceList" @click.stop="seleprice(item.price1,item.price2)"><li>{{item.price1}}-{{item.price2}}</li></a>
						<form class="price-order">
							<input v-model="price3" type="text">
							<span class="cc">-</span>
							<input v-model="price4" type="text">
							<input type="button" @click="cusseleprice" value="确定">
						</form>
					</ul>
				</div>
			</div>
			<div class="sort-box bgf5">
				<div class="sort-text">排序：</div>
				<a  @click.stop="salesdesc('totalcount')"><div class="sort-text">销量 <i class="iconfont icon-sortDown"></i></div></a>
				<a  @click.stop="salesdesc('totaldiscuss')"><div class="sort-text">评价 <i class="iconfont icon-sortDown"></i></div></a>
				<a  @click.stop="salesdesc('price')"><div class="sort-text">价格 <i class="iconfont icon-sortDown"></i></div></a>
				<div class="sort-total pull-right">共{{level2list.total}}个商品</div>
			</div>
		</section>
		<!--显示商品信息部分-->
		<section class="item-show__div clearfix">
			<div class="pull-left">
				<div class="item-list__area clearfix">
					<div class="item-card" v-for="item in level2list.list" @click.stop="itemshow(item.id)">
						<a href="item_show.html" class="photo">
							<img :src="item.imageurl" :alt="item.proname" class="cover">
							<div class="name">{{item.qualityexplain}}</div>
						</a>
						<div class="middle">
							<div class="price"><small>￥</small>{{item.price}}</div>
							<div class="sale"><a @click.stop="addcare(item.id)">加入购物车</a></div>
						</div>
						<div class="buttom">
							<div>销量 <b>{{item.totalcount}}</b></div>
							<div>人气 <b>{{item.popularity}}</b></div>
							<div>评论 <b>{{item.totaldiscuss}}</b></div>
						</div>
					</div>
				</div>

				<!-- 分页 -->
				<div class="page text-right clearfix">
					<a @click.stop="seleproduct(level2list.prePage)">上一页</a>
					<a  v-for="i in level2list.navigatepageNums" :class="{actives:level2list.pageNum==i}"  @click.stop="seleproduct(i)">{{i}}</a>
					<a class="" @click.stop="seleproduct(level2list.nextPage)" >下一页</a>
					<a class="disabled">{{level2list.pageNum}} /{{level2list.pages}}页</a>
					<form  class="page-order">
						到第
						<input v-model="topage" type="text" name="page">
						页
						<input class="sub" @click.stop="seleproduct(topage)" type="button" value="确定">
					</form>
				</div>
			</div>
			<div class="pull-right">
				
				<div class="desc-segments__content">
					<div class="lace-title">
						<span class="c6">爆款推荐</span>
					</div>
					<div class="picked-box">
						<a href="" v-for="item in hotproduct.list" @click.stop="itemshow(item.id)" class="picked-item"><img :src="item.imageurl" :alt="item.explain" class="cover"><span class="look_price">¥{{item.price}}</span></a>

				</div>
			</div>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="udai_welcome.html" class="r-item-hd">
					<i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_shopcart.html" class="r-item-hd">
					<i class="iconfont icon-cart"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_collection.html" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="issues.html" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>

	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>U袋网</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 U袋网 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
			</p>
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">


        var vm=new Vue({
            el:"#vuebox",
            data:{
                //搜索
                textsearch:"",
                indexid:"",
				indextypeid:"",
				indextext:"",

            //一级份分类
				level1:"",
				//二级分类
				level2:"",
				//根据二级分类查询商品信息
				level2list:"",
                //查询所有颜色
                clothColor:{},
                //查询所有尺码
                sizeList:{},
                //查询价格
                priceList:"",
				//查询爆款推荐
				hotproduct:"",
				//分页查询
                topage:"",
				//多条件查询
				colorid:"",
				//根据尺码查询数据
				sizeid:"",
				price1:"",
				price2:"",
                price3:"",
                price4:"",
				desc:""
            },
            methods:{
                //搜索按钮
                searchsou:function () {
                    axios.get("/seleduotiaojian",{params:{proname:this.textsearch}}).then(res=>{
                        this.level2list=res.data.data;
                    }),
                    axios.get("/seleProName",{params:{proname:this.textsearch}}).then(res=>{
                        this.level2=res.data;
                        this.indexid=res.data.level2[0].id;
                    })
                },
            //查询根据一级分类查询二级分类一级数据
                selealltype:function (id) {

                    $(".ul_filter").html('');

                    //查询二级分类
                    axios.get("/seleProtype",{params:{level2:id}}).then(res=>{
                        this.level2=res.data;
                    }),
                        // //根据一级菜单商品信息
                        axios.get("/seleduotiaojian",{params:{typeid:id}}).then(res=>{
                            this.level2list=res.data.data;
                        }),
                        //查询爆款推荐
                        axios.get("/seleProducttext",{params:{typeid:id}}).then(res=>{
                            this.hotproduct=res.data.data;

                        })
					this.seleproduct(1);
                    this.indexid=""
					this.indextypeid=id;
                },
                //分页查询数据
                seleproduct:function (pageNum,text) {
                    axios.get("/seleduotiaojian",{params:{typeid2:this.indexid,proname:text,pageNum:pageNum,typeid:this.indextypeid}}).then(res=>{
                        this.level2list=res.data.data;
                    })
                },
				//商品分类查询二级菜单
                selelevel2type:function (id,proname) {
                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:id,colorid:this.colorid,sizeid:this.sizeid,price1:this.price1,price2:this.price2,desc:this.desc}}).then(res=>{
                        this.level2list=res.data.data;
                        this.indexid=id;
                    })
                },

				//根据颜色查询商品
                selecolor:function (id,color) {
                    var oCarouselBox=document.getElementById("typecolor");
                    if(oCarouselBox==null){
                        $(".ul_filter").append('<span id="typecolor" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t'+color+' <button class="close" onclick="guancolor()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }else{
                        $("#typecolor").remove();
                        $(".ul_filter").append('<span id="typecolor" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t'+color+' <button class="close" onclick="guancolor()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }

                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:this.indexid,colorid:id,sizeid:this.sizeid,price1:this.price1,price2:this.price2,desc:this.desc}}).then(res=>{
                        this.level2list=res.data.data;
                        console.log(this.level2list)
                        this.colorid=id;
                    })
                },

				//根据尺码查询商品信息
                selesize:function (id,size) {
                    var oCarouselBox=document.getElementById("typesize");
                    if(oCarouselBox==null){
                        $(".ul_filter").append('<span id="typesize" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t尺寸:'+size+' <button class="close" onclick="guantypesize()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }else{
                        $("#typesize").remove();
                        $(".ul_filter").append('<span id="typesize" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t尺寸:'+size+' <button class="close" onclick="guantypesize()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }
                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:this.indexid,colorid:this.colorid,sizeid:id,price1:this.price1,price2:this.price2,desc:this.desc}}).then(res=>{
                        this.level2list=res.data.data;
                        this.sizeid=id;
                    })
                },
				//根据商品价格查询商品信息
                seleprice:function (price1,price2) {
                    var oCarouselBox=document.getElementById("pricesele");
                    if(oCarouselBox==null){
                        $(".ul_filter").append('<span id="pricesele" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t价格:'+price1+'-'+price2+' <button class="close" onclick="guantypeprice()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }else{
                        $("#pricesele").remove();
                        $(".ul_filter").append('<span id="pricesele" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t价格:'+price1+'-'+price2+' <button class="close" onclick="guantypeprice()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }
                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:this.indexid,colorid:this.colorid,sizeid:this.sizeid,price1:price1,price2:price2,desc:this.desc}}).then(res=>{
                        this.level2list=res.data.data;
                        this.price1=price1;
                        this.price2=price2;
                    })
                },
				//自定义铵价格查询
                cusseleprice:function () {
                    var oCarouselBox=document.getElementById("priceseles");
                    if(oCarouselBox==null){
                        $(".ul_filter").append('<span id="priceseles" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t价格:'+this.price3+'-'+this.price4+' <button class="close" onclick="guantypeprices()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }else{
                        $("#priceseles").remove();
                        $(".ul_filter").append('<span id="priceseles" class="pull-left">\n' +
                            '\t\t\t\t\t\t\t\t价格:'+this.price3+'-'+this.price4+' <button class="close" onclick="guantypeprices()"  type="button">&times;</button>\n' +
                            '\t\t\t\t\t\t\t</span>')
                    }
                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:this.indexid,colorid:this.colorid,sizeid:this.sizeid,price1:this.price3,price2:this.price4,desc:this.desc}}).then(res=>{
                        this.level2list=res.data.data;
                        this.price1=price3;
                        this.price2=price4;
                    })
                },
				//排序
                salesdesc:function (desc) {
                    axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid,typeid2:this.indexid,colorid:this.colorid,sizeid:this.sizeid,price1:this.price3,price2:this.price4,desc:desc}}).then(res=>{
                        this.level2list=res.data.data;
                        this.desc=desc;
                    })
                },

				//查询某一菜单下的全部商品份额里
                seleall:function () {
                    $(".ul_filter").html('');
                    // //根据一级菜单商品信息
                    // axios.get("/seleduotiaojian",{params:{typeid:this.indextypeid}}).then(res=>{
                    //     this.level2list=res.data.data;
                    // })
                },

                //查询数据详情
                itemshow:function (id) {
                    axios({url:"/pro/for/id", method:"get",
                        params:{proid:id}})
                        .then(res=>{
                            if(res.data!=null) {
                                window.location.href="/item_show";
                            }else {
                                alert("出现故障请联系管理员!");
                            }
                        });
                },

                //把商品加入购物车
                addcare:function (id) {
					alert("加入购物车:"+id);
                }



            },

			mounted(){
                //传过来一级菜单
                var typid=location.search.slice(1).split("=")[1];
                this.indextypeid=typid;
                //传过来二级
                var id=location.search.slice(1).split("=")[2];
                this.indexid=id;
                var text=decodeURIComponent(location.search.slice(1).split("=")[3]);
                this.textsearch=text;
                //从主页面传过来第三级菜单的id
                var level3id=location.search.slice(1).split("=")[4];
                if(level3id.length!=0){
                    axios.get("/seleProducttwo",{params:{typeid:level3id,pageNum:1,pageSize:4}}).then(res=>{
                        this.level2list=res.data.data;
                    }),
                        //查询爆款推荐
                        axios.get("/seleProducttwo",{params:{typeid:level3id,pageNum:1,pageSize:6}}).then(res=>{
                            this.hotproduct=res.data.data;
                        }),
                        //查询二级分类
                        axios.get("/seleProtypeid",{params:{id:level3id}}).then(res=>{
                            this.level2=res.data;
                            this.indexid=res.data.level2[0].id;
                        })
				}else{
                    //查询商品信息
                    this.seleproduct(1,text);
                    //查询爆款推荐
                    axios.get("/seleProducttext",{params:{typeid:typid}}).then(res=>{
                        this.hotproduct=res.data.data;
                    }),
                        //查询二级分类
                        axios.get("/seleProtype",{params:{level2:typid}}).then(res=>{
                            this.level2=res.data;
                        })
				}
                //查询一级分类
                axios.get("/seleProtype").then(res=>{
                    this.level1=res.data;
				}),
                //查询颜色表
                axios.get("/seleColor").then(res=>{
                    this.clothColor=res.data;
                }),
                    //查询尺码表
                    axios.get("/seleSize").then(res=>{
                        this.sizeList=res.data;
                    }),
                    //查询价格表
                    axios.get("/selePrice").then(res=>{
                        this.priceList=res.data;
                    })
			}
    })
</script>

<script>
    //关闭颜色
    function guancolor() {
        $("#typecolor").remove()
    }
    //关闭尺寸
    function guantypesize() {
        $("#typesize").remove()
    }
    //关闭价格
    function guantypeprice() {
        $("#pricesele").remove()
    }
    function guantypeprices() {
        $("#priceseles").remove()
    }
    $(document).ready(function(){ $('.to-top').toTop({position:false}) });
</script>